<template>
    <div class="login-container">
        <h1>登录</h1>
        <div class="form-group">
            <label for="username">账号</label>
            <input type="text" id="username" v-model="username" class="form-control">
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" v-model="password" class="form-control">
            <div id="error"> {{error}}</div>
        </div>
        <button @click="axioslogin" class="btn-login">登录</button>
    </div>
</template>

<script>
import axios from 'axios'
    export default {
        data(){
            return {
                username: '',
                password: '',
                error:''
            }
        },
        methods: {
            fetchlogin(){
                fetch('http://localhost:3000/users?username='+this.username).then((res)=>res.json())
                .then((data)=>{
                    console.log(data);
                    if(data.length ===0){
                        this.error = '用户不存在'
                    }else{
                        if(data[0].password === this.password){
                            alert('登录成功')
                            this.$router.push('/home')
                        }else{
                            this.error = '密码错误'
                    }
                    
                    }
                    
                    })
                

            },
            axioslogin(){
                axios.get('http://localhost:3000/users?username='+this.username)
                .then((res)=>{
                    console.log(res.data);
                    if(res.data.length ===0){
                        this.error = '用户不存在'
                    }else{
                        if (res.data[0].password === this.password) {
                            alert('登录成功')
                            this.$router.push('/welcome')
                        } else {
                            this.error = '密码错误'
                        }
                    }
            })
            }
        }
    }
</script>

<style scoped>
.login-container {
    width: 300px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-control {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.btn-login {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.btn-login:hover {
    background-color: #0056b3;
}
#error{
    color:red;

}
</style>
